<template>
  <el-dialog
    v-model="model['isShow']"
    draggable
    :close-on-click-modal="false"
    destroy-on-close
    title="历史标记记录"
    width="60%"
  >
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      />
    </el-table>
    <el-pagination
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      class="pagin"
      size="small"
      :page-sizes="[10, 20, 50, 100]"
      layout="prev, pager, next, jumper,sizes,total"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

const model = defineModel({ default: { isShow: false } });
const pagination = reactive({
  total: 10,
  pageSize: 10,
  currentPage: 1
});

const columns = reactive([
  { prop: "code", label: "标记序号" },
  { prop: "name", label: "标记名称" },
  { prop: "type", label: "编辑类型" },
  { prop: "time", label: "操作时间" },
  { prop: "zhanghao", label: "操作账号" }
]);
const tableData = reactive([
  {
    code: "1",
    time: "2016-05-03",
    name: "小花",
    type: "xX",
    zhanghao: "你的账号"
  },
  {
    code: "2",
    time: "2016-05-15",
    name: "嗯嗯嗯",
    type: "全能型 ",
    zhanghao: "别人的账号"
  }
]);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>

<style lang="scss" scoped>
.pagin {
  margin-top: 20px;
}
</style>
